<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>缓存区管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/layui.css"  media="all">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/toastr.min.css"  media="all">
</head>
<body>
<div class="demoTable" style="padding:10px 0 0 15px">
    <div class="layui-inline">
        <input class="layui-input" name="keyword" id="keyword" autocomplete="off" placeholder="请输入配件编号">
    </div>
    <button class="layui-btn layui-btn-blue" style="margin: 0 0 0 10px" data-type="reload"><i class="layui-icon layui-icon-search">  搜索</i></button>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>
<div id="partTableDiv" hidden style="">
	<div class="demoTable" style="padding:10px 0 0 15px">
	    <div class="layui-inline">
	    	<input class="layui-input" name="paname" id="paname" placeholder="请输入配件名称" style="display: inline; width: 80%">
	    </div>
	    <button class="layui-btn layui-btn-blue" style="margin: 0 0 0 10px" data-type="reload"><i class="layui-icon layui-icon-search">  搜索</i></button>
	</div>
	<table class="layui-hide" id="partTable" lay-filter="partTable" style="padding: 5px;"></table>
	<button class="layui-btn layui-btn-blue" id="addPart" style="margin-left: 45%;">提交</button>
</div>
<!-- 出库测试 -->
<div id="formDiv3" hidden>
	<form class="layui-form" id="addform3">
		<input type="hidden" id="materialNum" name="materialNum"><br>
		<label class="layui-form-label">出库数量</label><input lay-verify="quantity" class="layui-input" type="number" id="quantity" name="quantity" style="width:300px;"><br>
		<button class="layui-btn layui-btn-blue" lay-submit lay-filter="addform3" style="margin-left:140px">出库</button>&emsp;&emsp;&emsp;&emsp;<button type="reset" class="layui-btn layui-btn-primary">重置</button>
	</form>
</div>
<div id="formDiv2" hidden>
	<form class="layui-form" id="addform2">
		<label class="layui-form-label">所需配件</label><br>
			<table class="layui-table" lay-filter="formTable" style="width:95%;text-align: center;margin: 0 1em 0 1em;">
				<thead>
					<tr>
						<td>配件编号</td>
						<td>配件名称</td>
						<td>规格型号</td>
						<td>计量单位</td>
						<td>包装规格</td>
						<td>批号</td>
						<td>入库数量</td>
						<td>
							<a class="layui-btn layui-btn-primary layui-btn-sm" id="addTr"><i class="layui-icon"></i></a>
						</td>
					</tr>
				</thead>
				<tbody id="addTbody">
				</tbody>
			</table>
		<br>
		<button class="layui-btn layui-btn-blue" lay-submit lay-filter="addform2" style="margin-left:40%">叫料</button>&emsp;&emsp;&emsp;&emsp;<button type="reset" class="layui-btn layui-btn-primary">重置</button>
	</form>
</div>
<div id="formDiv" hidden>
	<form class="layui-form" id="addform">
		<input type="hidden" id="caID" name="caID"><br>
		<label class="layui-form-label">预警值上限</label><input lay-verify="upperLimit" class="layui-input" type="number" id="upperLimit" name="upperLimit" style="width:300px;"><span style="color:red; font-size: 24px;float: right;margin: -28px 3em 0 0;">*</span><br>
		<label class="layui-form-label">预警值下限</label><input lay-verify="lowerLimit" class="layui-input" type="number" id="lowerLimit" name="lowerLimit" style="width:300px;"><span style="color:red; font-size: 24px;float: right;margin: -28px 3em 0 0;">*</span><br>
		<button class="layui-btn layui-btn-blue" lay-submit lay-filter="addform" style="margin-left:140px">设置</button>&emsp;&emsp;&emsp;&emsp;<button type="reset" class="layui-btn layui-btn-primary">重置</button>
	</form>
</div>
 
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-blue" lay-event="add"><i class="layui-icon layui-icon-add-1">  叫料</i></button>
		<!-- <button class="layui-btn layui-btn-blue" lay-event="set"><i class="layui-icon layui-icon-set-fill">  设置预警值</i></button> --!>
	</div>
</script>
              
          
<script src="${pageContext.request.contextPath }/assets/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/layui.all.js"></script>
<script src="${pageContext.request.contextPath }/assets/js/jquery.min.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/js/toastr.min.js" charset="utf-8"></script>
 
<script>
layui.use(['table','layer','upload','form'], function(){
	var table = layui.table;
	var layer = layui.layer,
    form = layui.form;
	
	var $ = layui.jquery, active = {
			reload:function () {
				var keyword = $("#keyword").val();
				console.log(keyword)
				table.reload('contenttable1',{
					method:'get',
					where:{panum: keyword}
				});
				var paname = $("#paname").val();
				table.reload('contenttable',{
					method:'get',
					where:{paname: paname}
				});
			}
		}
	$('.layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
	table.render({
	    elem: '#test'
	    ,url:'${pageContext.request.contextPath }/cacheArea/listPageCacheArea.do'
	    ,toolbar: '#toolbarDemo'
	    ,title: '缓存区数据表'
	    ,id :'contenttable1'
	    ,limits:[10,20,30]
	    ,cols: [[
	      {type: 'checkbox', fixed: 'left'}
	      ,{type: 'numbers', title:'序号', fixed: 'left', width:'5%', unresize: true, sort: true}
	      ,{field:'panum', title:'配件编号'}
	      ,{field:'paname', title:'配件名称'}
	      ,{field:'pamodel', title:'规格型号'}
	      ,{field:'paunit', title:'计量单位'}
	      ,{field:'packNorm', title:'包装规格'}
	      ,{field:'batch', title:'批号'}
	      ,{field:'quantity', title:'总库存'}
	      /* ,{field:'upperLimit', title:'预警值上限', templet: function(d){
	          if (d.upperLimit == -1) {
				return '';
			} else {
				return d.upperLimit;
			}
	      }}
	      ,{field:'lowerLimit', title:'预警值下限', templet: function(d){
	    	  if (d.lowerLimit == -1) {
					return '';
				} else {
					return d.lowerLimit;
				}
	      }} */
	    ]]
	    ,page: true
	});
  
	//头工具栏事件
	table.on('toolbar(test)', function(obj){
		var checkStatus = table.checkStatus(obj.config.id);
	    switch(obj.event){
	    	case 'add':
	    		layer.open({
					  type: 1 		//Page层类型
					  ,area: ['50%', '70%'] //宽  高
					  ,title: '叫料'
					  ,shade: 0.6 	//遮罩透明度
					  ,shadeClose: true //点击遮罩关闭
					  ,maxmin: true //允许全屏最小化
					  ,anim: 1 		//0-6的动画形式，-1不开启
					  ,content: $('#formDiv2')
					  ,success: function () {
						  document.getElementById("addform2").reset();
						  var tbody = document.getElementById("addTbody");
					      var tr = tbody.getElementsByTagName("tr");
					      $("#addTbody  tr").remove();
					      $("#addTr").off("click").on("click",function(){
					    	  layer.open({
								  type: 1 		//Page层类型
								  ,area: ['60%', '70%'] //宽  高
								  ,title: '选择添加的材料'
								  ,shade: 0 	//遮罩透明度
								  ,shadeClose: true //点击遮罩关闭
								  ,maxmin: true //允许全屏最小化
								  ,anim: 2 		//0-6的动画形式，-1不开启
								  ,content: $('#partTableDiv')
								  ,success: function () {
									  $('#paname').val('');
									  table.render({
										    elem: '#partTable'
										    ,url:'${pageContext.request.contextPath }/partMana/listPagePart.do'
										    ,title: '材料数据表'
										    ,id :'contenttable'
										    ,limits:[10,20,30]
										    ,cols: [[
										      {type: 'checkbox', fixed: 'left'}
										      ,{field:'panum', title:'配件编号'}
										      ,{field:'paname', title:'配件名称'}
										      ,{field:'pamodel', title:'配件规格'}
										      ,{field:'paremark1', title:'计量单位'}
										      ,{field:'paremark2', title:'包装规格'}
										    ]]
										    ,page: true
										});
									  $("#addPart").off("click").on('click', function() {
										var checkStatus = table.checkStatus(obj.config.id);
										console.log(checkStatus)
										if (checkStatus.data.length <= 0) {
											toastr.warning("请选择所需添加的材料!");
											return false;
										} else {
											var tbody = document.getElementById("addTbody");
											var partList = checkStatus.data;
											for (var i = 0; i < partList.length; i++) {
												var row = tbody.insertRow();
												var innerHTML1 = '<input type="hidden" name="paID" value="'+partList[i].paid+'">'+partList[i].panum;
												var innerHTML2 = partList[i].paname;
												var innerHTML3 = partList[i].pamodel;
												var innerHTML4 = partList[i].paremark1;
												var innerHTML5 = partList[i].paremark2;
												var innerHTML6 = '<input lay-verify="batch" class="layui-input" type="text" name="batch">';
												var innerHTML7 = '<input lay-verify="quantity" class="layui-input" type="number" name="quantity">';
												var innerHTML8 = '<a class="layui-btn layui-btn-primary layui-btn-sm delTr"><i class="layui-icon"></i>';
												row.insertCell(0).innerHTML = innerHTML1;
												row.insertCell(1).innerHTML = innerHTML2;
												row.insertCell(2).innerHTML = innerHTML3;
												row.insertCell(3).innerHTML = innerHTML4;
												row.insertCell(4).innerHTML = innerHTML5;
												row.insertCell(5).innerHTML = innerHTML6;
												row.insertCell(6).innerHTML = innerHTML7;
												row.insertCell(7).innerHTML = innerHTML8;
												tbody.appendChild(row);
												$(".delTr").off("click").on('click', function() {
													var tr = $(this)[0].parentNode.parentNode;
													var tbody = tr.parentNode;
													tbody.removeChild(tr);
													
												});
											}
											 layer.close(layer.index);
										}
									})
								  }
						    	  ,end: function () {
									  var formDiv = document.getElementById('partTableDiv');
									  formDiv.style.display = '';
								  }
					    	  });
					      });
						  $('.delTr').on('click', function() {
							console.log($(this)[0].parentNode.parentNode)
							var tr = $(this)[0].parentNode.parentNode;
							var tbody = tr.parentNode;
							if (tbody.rows.length==1) {
								toastr.warning("至少添加一条数据!");
								return false;
							} else {
								tbody.removeChild(tr);
							}
						});
					  }
					  ,end: function () {
						  var formDiv = document.getElementById('formDiv2');
						  formDiv.style.display = '';
						  var formDiv2 = document.getElementById('partTableDiv');
						  formDiv2.style.display = '';
						  layer.closeAll();
					  }
					});
	      	break;
	      	case 'select':
	      		console.log(obj)
	      	break;
	      	case 'set':
	    		var data = checkStatus.data;
	        	var idArr = new Array();
	        	if(data.length==0){
	        		toastr.warning("请选择一条记录！");
	        		return false;
	        	}
	        	if(data.length>1){
	        		toastr.warning("只能选择一条记录！");
	        		return false;
	        	}
	        	var caID = '';
	        	for(var i=0;i<data.length;i++){
	        		caID = data[i].caID;
	        	}
	    		layer.open({
					  type: 1 		//Page层类型
					  ,area: ['500px', '300px'] //宽  高
					  ,title: '设置预警值'
					  ,shade: 0.6 	//遮罩透明度
					  ,shadeClose: true //点击遮罩关闭
					  ,maxmin: true //允许全屏最小化
					  ,anim: 1 		//0-6的动画形式，-1不开启
					  ,content: $('#formDiv')
					  ,success: function () {
						  document.getElementById("addform").reset();
						  $('#caID').val(caID);
					  }
					  ,end: function () {
						  var formDiv = document.getElementById('formDiv');
						  formDiv.style.display = '';
					  }
					});
	      	break;
	    };
	});
  
	/**
     * 表单校验
     */
    form.verify({
    	//value：表单的值、item：表单的DOM对象
    	upperLimit: function(value, item){
    		if(value == ''){
    			return '预警值上限不能为空';
    		}
    		if(value <= 0){
    			return '预警值上限不能小于等于0';
    		}
    	},
    	lowerLimit: function(value){
    		if(value == ''){
    			return '预警值下限不能为空';
    		}
    		if(value <= 0){
    			return '预警值下限不能小于等于0';
    		}
    	},
    	batch: function(value){
    		if(value == ''){
    			return '批次号不能为空';
    		}
    	},
    	quantity: function(value){
    		if(value == ''){
    			return '数量不能为空';
    		}
    	}
    });
    /**
     * 通用表单提交(AJAX方式)（新增）
     */
     form.on('submit(addform)', function (data) {
     	$.ajax({
 			url : '${pageContext.request.contextPath }/cacheArea/setWarningValue.do',
 			data : $('#addform').serialize(),
 			type : "post",
 			dataType : "json",
 			}).done(
 				function(res) {
 					if (res > 0) {
 						toastr.success('设置成功！');
 						setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
 							//关闭模态框
 							// 父页面刷新
 							window.location.reload();  
 						},2000);
 					}
 				}
 			).fail(
 				function(res) {
 					layer.close(1);
 					toastr.error('设置失败！');
 				}
 			)
 			return false;
     });
    form.on('submit(addform2)', function (data) {
    	var tbody = document.getElementById("addTbody");
	    var tr = tbody.getElementsByTagName("tr");
	    if (tr.length == 0) {
	    	toastr.warning("至少添加一种材料!");
			return false;
		}
    	$.ajax({
			url : '${pageContext.request.contextPath }/cacheArea/cacheAreaIn.do',
			data : $('#addform2').serialize(),
			type : "post",
			dataType : "json",
			}).done(
				function(res) {
					if (res > 0) {
						toastr.success('生成领料单成功！');
						setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
							//关闭模态框
							// 父页面刷新
							window.location.reload();  
						},2000);
					}
				}
			).fail(
				function(res) {
					layer.close(1);
					toastr.error('叫料失败！');
				}
			)
			return false;
    });
});

toastr.options.positionClass = 'toast-top-center'; //提示框的位置设置为中上
</script>

</body>
</html>